<template>
	<view class="home">
		<view class="header">
			<view class="header-menu">
				<a href=""><b>特价</b></a>
				<a href="">首页</a>
				<a href="">秒送</a>
				<a href=""><b>新品</b></a>
			</view>
			<view class="form">
				<form action="submit" >
					<input class="input" type="text" />
					<button class="btn" size="mini" plain>搜索</button>
				</form>
			</view>
		</view>
		<view class="scroll-box">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
				<view class="main">
					<view class="menu">
						<a href=""><b>推荐</b></a>
						<a href="" style="color: green;">国家补贴</a>
						<a href="">医药健康</a>
						<a href="">酒饮</a>
						<a href="">个护清洁</a>
						<a href="">分类</a>
					</view>
					<view class="content">
						<view class="tab">
							<a href="">秒杀</a>
							<a href="">京东校园</a>
							<a href="">领券</a>
							<a href="">京东旅行</a>
							<a href="">京东快递</a>
						</view>
						<view class="component" >
							<view class="card">
								<view class="card-item">
									<b>国家补贴*百亿补贴</b>
									<image src="/static/card1.png" mode="scaleToFill" ></image>
								</view>
								<view class="card-item">
									<b>品质生活</b>
								</view>
								<view class="card-item">
									<b>9.9包邮</b>
									<image src="/static/card2.png" mode="scaleToFill"></image>
								</view>
								<view class="card-item">
									<text style="font-size: 70%; color: red;">直播低价</text>
									<image src="/static/card3png.png" mode="scaleToFill"></image>
								</view>
								<view class="card-item">
									
								</view>
								
							</view>
							<view class="goods-card">
								<view class="goods-card-left">
									<view class="swiper">
										<image src="/static/swiper.png" mode="scaleToFill"></image>
									</view>
									<view class="goods-card-left-item">
										
									</view>
									<view class="goods-card-left-item">
										
									</view>
									<view class="goods-card-left-item">
										
									</view>
									<view class="goods-card-left-item">
										
									</view>
								</view>
								<view class="goods-card-right">
									<view class="activity">
										
									</view>
									<view class="student">
										
									</view>
									<view class="goods-card-right-item">
										
									</view>
									<view class="goods-card-right-item">
										
									</view>
									<view class="goods-card-right-item">
										
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
			
		</view>


	</view>
</template>

<script setup>

</script>

<style lang="less" scoped>
	a{
		text-decoration: none;
	}
.home{
	width: 100%;
	height: 100%;
	.header{
		display: flex;
		flex-wrap: wrap;

		height: 10vh;
		width: 100%;
		background-color: white;
		.header-menu{
			width: 100vw;
			height: 6vh;
			justify-content: space-around;
			a{
				display: inline-block;
				text-align: center;
				color: black;
				width: 25%;
			}
		}
		.form{
			height: 4vh;
			width: 100%;
			border: 1rpx solid red;
			box-sizing: border-box;
			.input{
				display: inline-block;
				width: 80%;
				height: 100%;
				font-size: 100%;	
			}
			.btn{
				border: none;
				display: inline-block;
				width: 20%;
				height: 100%;
			}


	}
}

	.scroll-box {
		margin-top: 10rpx;
		height: 75vh;
		width: 100%;
		background-color: #f5f5f5;
		
		

			.scroll-Y{
				width: 100%;
				height: 100%;
				overflow: auto;
				.main{
			background-color: whitesmoke;
			display: flex;
			flex-wrap: wrap;
			// align-items: flex-start;
			align-content: flex-start;
			height: 100%;
			width: 100%;
			// overflow: hidden;
			.menu{
				height:5vh;
				width: 100%;
				
				justify-content: space-between;
				a{
					display: inline-block;
					width: 100/6%;
					height: 100%;
					font-size: 90%;
					
					text-align: center;
					align-items: center;
					text-wrap: nowrap;
					color: black;
				}
			}
		
			.content{
				margin-top: 1vh;
				width: 100%;
				height: 75vh;
				justify-content: left;
				.tab a{
					height: 100%;
					color: black;
					display: inline-block;
					width: 18%;
					text-align: center;
				}
			
			.component{
				height: 60vh;
				width: 100%;
				.card{
					height: 50%;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					.card-item{
						width: 45%;
						height: 45%;
						background-color: white;
						// border: 1px solid black;
						box-shadow: 0 1rpx 1px white;
						image{
							height: 70%;
							width: 100%;
						}
						
					}
					:nth-last-child(1), :nth-last-child(2){
						width: 20%;
					}
				}
			
				.goods-card{
					
					
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: space-around;
					// overflow: auto;
					
					
				.goods-card-left{
						width: 45%;
						height: 100%;
						
						.swiper{
							width: 100%;
							height: 300rpx;
							background-color:white;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.goods-card-left-item{
							margin-top: 20rpx;
							height: 350rpx;
							width: 100%;
							background-color: white;
						}
					
				}
				.goods-card-right{
					width: 45%;
					height: 100%;
					
					.activity{
						width: 100%;
						height: 250rpx;
						background-color: white;
						
					}
					.student{
						margin-top: 20rpx;
						width: 100%;
						height: 300rpx;
						background-color: white;
					}
					.goods-card-right-item{
						margin-top: 20rpx;
						height: 350rpx;
						width: 100%;
						background-color: white;
					}
				}
			}
		}
		}}}
	}
}
</style>
